<template>
  <view class="share-popup fixed_box" @click.stop="$emit('close')">
    <view class="publicPopup_box groups_share_center share_center_type">
      <view class="share_preview">
        <view class="share_preview_title">
          <image class="preview_title_img" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/logo2_icon.png" />
          <view>速速团</view>
        </view>
        <div class="share_preview_content">{{shareObject.title}}</div>
        <image class="share_preview_canvas" :src="shareObject.url" />
        <view class="share_mini_program_border"></view>
        <view class="share_mini_program">
          <image class="mini_program_icon" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share6_icon.png" />
          <view>小程序</view>
        </view>
      </view>
    </view>
    <view class="publicPopup_box_bt groups_share_bt">
      <view class="groups_share_select">
        <button open-type="share" class="buttonStyleNone" id="shareFriends">
          <view class="share_friends">
            <image class="cover_image" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share3_icon.png" />
            <view class="fz-14">分享给朋友</view>
          </view>
        </button>
        <view class="share_friends circle_friends" @click.stop="_drawPoster">
          <image class="cover_image" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share2_icon.png" />
          <view>生成海报</view>
        </view>
      </view>
      <view class="split_line_box"></view>
      <view class="close_share" @click.stop="$emit('close')">取消</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'sharePopup',
  props: {
    shareObject: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  methods: {
    _drawPoster() {
      this.$emit('drawPoster')
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed_box {
  .groups_share_center {
    background: none;
    width: 520rpx;
    &.share_center_type {
      transform: translate(-50%, -70%);
    }
    .groups_share_text {
      text-align: center;
      font-size: 28rpx;
      color: #fff;
      margin-bottom: 36rpx;
    }
  }
  .groups_share_bt {
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .groups_share_select {
      width: 100%;
      height: 212rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .share_friends {
      display: flex;
      flex-direction: column;
      align-items: center;
      .cover_image {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 12rpx;
      }
      .share_friends_btn_box {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 12rpx;
      }
    }
    .close_share {
      height: 96rpx;
      background: #ffffff;
      // box-shadow: 0rpx 2rpx 0rpx 0rpx #f2f3f5 inset;
      font-size: 28rpx;
      color: #969799;
      text-align: center;
      line-height: 96rpx;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      &.close_share_ios {
        padding-bottom: 60rpx;
      }
    }
  }
  // 分享预览图
  .share_preview {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx 20rpx 14rpx;
    &.share_preview_4 {
      width: 260px;
      height: 301px;
      margin: 0 auto 0;
      box-sizing: border-box;
    }
    .share_preview_title {
      width: 480rpx;
      font-size: 24rpx;
      color: #666666;
      display: flex;
      align-items: center;
      .preview_title_img {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }
    }
    .share_preview_content {
      font-size: 32rpx;
      color: #323232;
      white-space: pre-wrap;
      width: 480rpx;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .share_preview_canvas {
      width: 100%;
      height: 384rpx;
      margin: 20rpx auto 0;
    }
    .share_mini_program {
      display: flex;
      align-items: center;
      // height: 2rpx;
      // border-top: 2rpx solid #dcdee0;
      .mini_program_icon {
        width: 24rpx;
        height: 22rpx;
        margin-right: 8rpx;
      }
    }
    .share_mini_program_border {
      height: 2rpx;
      background-color: #dcdee0;
      width: 100%;
      margin: 20rpx 0;
    }
  }
}
</style>